GraphQL 基本
you can try GraphQL on https://developer.github.com/v4/explorer/
What is GraphQL?
https://graphql.org/
https://gyazo.com/9e1c3eba18679f66ffa994795414e045
APIの新しい書き方
Facebook が発明、Open Source
Facebook, GitHub, Shopify利用している
GraphQL 強み
Request とResponse 形が同じ、見れば分かる
組合自由、追加、削除とても簡単、Frontend側API再定義
Schema Driven Development
WYSIWYG
https://gyazo.com/421b8e9a49caa6c7aaa60d51a1624bde
REST: /user/:id
umamichi.icon login: "" のところがパラメータになりますか？
https://gyazo.com/b777aad80d540695c479ac26ecb5e8af
自由組合せ
https://gyazo.com/ee6234d36c4e0020097fcd52fe23990e
REST:
1. /user/ThaddeusJiang
2. /repositoies/ + filter user_id=ThaddeusJiang
Types
https://gyazo.com/63210a57d567be11da3bd5010c66b172
GraphQL: ID, Boolean, String, Int
REST:
4. Core Concept
https://graphql.org/learn/
Query + Mutation
Query = GET
Mutation = POST, PUT, DELETE, PATCH
Fragments
GraphQL Anti-Pattern - Nested Fragment
Types
ID, String, Boolean, Int, Float
User, Order
Alias
Union type
5. GraphQL + Vue
https://apollo.vuejs.org/guide/apollo/#apollo-options
おすすめ：apollo + vue
code:vue-apollo-query
<template>
<div>{{ user.id }}</div>
<div>{{ user.name }}</div>
<div>{{ user.company }}</div>
</template>
<script>
import gql from 'graphql-tag'
export default {
apollo: {
// Simple query that will update the 'hello' vue property
hello: gql`query {
user {
id
name
company
isEmployee
repositories(last: 3) {
nodes {
name
forkCount
}
}
}
}`,
},
}
</script>
code:vue-apollo-mutation
methods: {
async addTag() {
const page = this.page.toString();
// Call to the graphql mutation
const result = await this.$apollo.mutate({
// Query
mutation: gql`mutation ($label: String!, page: !Int) {
addTag(label: $label) {
id
label
}
}`,
// Parameters
variables: {
label: this.newTag, // string
page, // number
},
})
}
}
6. think in GraphQL
https://graphql.org/learn/thinking-in-graphs/
Think your code from Schema
Send a GraphQL query to your API and get exactly what you need, nothing more and nothing less.
7. GraphQL FAQ
8. 個人経験
Single EndPoint
domain/__graphql
GraphQL がAPI定義だけ、業務情報を含まない。
frameworkはapolloだけではない
https://github.com/facebook/relay
https://github.com/zeit/swr
REST からGraphQL 移動
Step1: schema設計
code:schema
order
ticket
product
step2: 関連性見つける
code:relation
{
order {
ticket {
order {
}
}
}
}
{
order {
user {
id
}
}
}
step3: REST からGraphQLデータ渡す
code:rest
/orders
/orders/:id
/tickets/
/tickets/:id
/products/
/products/id
code:GraphQL
Query: {
product(obj, args, context, info) {
return context.db.loadProductByID(args.id).then(
productData => new Product(userData) // go, ruby
)
}
}
課題・ディメリット
N+1 問題
1つのリクエストが裏っかわではさらにN個分のリクエストがされること。
1+N問題の方が分かりやすいという意見が多い。
bmf-tech - N+1問題とは
フレームワークで解決できる？
できるそう
解決方法：https://www.youtube.com/watch?v=uCbFMZYQbxE
以前の解決方法：
front -> graphql -> MQ -> microservice
Routing Mapping
1. docker-compose
2. k8s
#勉強会
#GraphQL
#schema_driven_development
Created By tj